import React, { useEffect } from 'react';
import { Modal, Input, Form, Button, message } from 'antd';
import styles from './index.module.scss';
import { editPassword } from '@/service'
import { useTranslation } from 'react-i18next';


export default (props) => {
    const { t } = useTranslation();
    const { visible, onClose } = props;
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm(); // 创建表单实例

    const onSubmit = async () => {
        try {
            await form.validateFields().then(async (values) => {
                const { password, newPassword } = values;
                let params = {
                    password,
                    newPassword
                }
                editPassword(params).then(res => {
                    if (res.code === 0) {
                        messageApi.open({
                            type: 'success',
                            content: res?.msg,
                        });
                        handleClose();
                    } else {
                        messageApi.error({
                            type: 'error',
                            content: res?.msg,
                        });
                    }
                }).catch(e => {
                    messageApi.error({
                        type: 'error',
                        content: e?.msg
                    });
                });
            })
        } catch (error) {
            messageApi.error({
                type: 'error',
                content: error?.msg,
            });
        }
    };
    const handleClose = () => {
        onClose();
        form.resetFields();
    }
    return (
        <Modal
            title={t('login.forgetPwd')}
            open={visible}
            onCancel={handleClose}
            className='custom-notitle-modal'
            width={550}
            destroyOnClose
            maskClosable={false}
            footer={null}
        >
            <Form
                form={form}
                name="Password_form"
                className={`custom-form-primary ${styles.psdform}`}
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 12 }}
            >
                <Form.Item
                    label={t('common.modal.label.emailNow')}
                    name="email"
                    rules={[
                        { required: true, message: t('common.modal.correctEmailplacehoder') }
                    ]}
                >
                    <Input.Password
                        placeholder={t('common.modal.correctEmailplacehoder')} />
                </Form.Item>
                <Form.Item
                    label={t('common.modal.label.passwardNew')}
                    name="newPassword"
                    rules={[
                        { required: true, message: t('common.modal.newPasswordplacehoder') }
                    ]}
                >
                    <Input.Password
                        placeholder={t('common.modal.newPasswordplacehoder')} />
                </Form.Item>
                <Form.Item
                    label={t('common.modal.label.reEnter')}
                    name="newPasswordAgain"
                    dependencies={['newPassword']}
                    rules={[
                        { required: true, message: t('common.modal.newPasswordReplacehoder') },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('newPassword') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error(t('common.modal.passwordinconsistencyPlacehoder')));
                            },
                        }),
                    ]}
                >
                    <Input.Password
                        placeholder={t('common.modal.newPasswordReplacehoder')} />
                </Form.Item>
                <div className={styles.btnGroup}>
                    <Form.Item noStyle>
                        <Button className={styles.cancelBtn} onClick={handleClose}>
                            {t('common.modal.button.cancel')}
                        </Button>
                        <Button type='primary' htmlType="submit" onClick={onSubmit}>
                            {t('common.modal.button.submit')}
                        </Button>
                    </Form.Item>
                </div>
            </Form>
            {contextHolder}
        </Modal>
    );
}
